<template>
    <div class="container">
        <el-form :model="homework" :rules="rules" label-width="100px" class="hwForm">
            <el-form-item required label="班级" prop="classgradeId"> 
                <el-select v-model="homework.classgradeId" placeholder="班级" size="large" @change="getSubjectData">
                    <el-option
                        v-for="item in options.classgrades"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item required label="作业序列" prop="subjectId">
                <el-select v-model="homework.subjectId" placeholder="作业题目" size="large">
                    <el-option
                        v-for="item in options.subjects"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="作业主题" prop="hwTitle">
                <el-input style="width: 300px" v-model="homework.hwTitle" placeholder="请输入作业主题"></el-input>
            </el-form-item>
            <el-form-item label="作业内容" style="width: 70%;" prop="hwContent">
                <el-input
                    v-model="homework.hwContent"
                    :rows="10"
                    type="textarea"
                    placeholder="Please input and not more than 96 words"
                />
            </el-form-item>
            <el-form-item required label="附件" prop="hwFiles">
                <!-- 取消自动上传 -->
                <el-upload
                    class="upload-demo"
                    action="#"
                    :limit="1"
                    :auto-upload="false"
                    :on-change="onChange"
                >
                    <el-button type="primary" style="margin-right:50px">Click to upload</el-button>
                    <template #tip>
                    <div class="el-upload__tip">
                        jpg/png files with a size less than 500KB.
                    </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">立即发送</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { reactive,toRefs} from 'vue'
// import axios from '@/utils/axios'
export default {
    setup() {
        const dataMap = reactive({
            homework: {
                hwTitle: "",
                hwFiles: [],
                hwContent: "",
                classgradeId: "",
                subjectId: "",
            },
            options:{
                classgrades: [{}],
                subjects: [{}]
            },
            rules: {
                hwFiles: [
                { required: 'true', message: '请上传附件', trigger: ['change'] }
                ]
            }
        })
        return {
            ...toRefs(dataMap)
        }
    },
    methods: {
        submit() {
            let formData = new FormData();
            formData.append('userId',this.user.userId);
            formData.append('classgradeId',this.homework.classgradeId);
            formData.append('title',this.homework.hwTitle);
            formData.append('content',this.homework.hwContent);
            formData.append('subjectId',this.homework.subjectId);
            if(this.homework.hwFiles != "") formData.append('file',this.homework.hwFiles);

            this.$axios
                .post('student/hw/submit',formData)
                .then(response=> {
                    console.log(response)
                    this.$message.success("提交作业成功！")
                    this.homework = ''
                })
                .catch(function (error){
                    console.log(error)
                })
                .then(function (){
                    console.log("测试成功")
                })
        },
        // 当文件列表发生改变时，获取文件内容
        onChange(file,files) {
            this.homework.hwFiles = files[0].raw
        },
        getClassgradeData(){
            this.$axios
                .get('student/class/basicinfo')
                .then(response=> {
                    this.options.classgrades = response.data
                    console.log(this.options.classgrades)
                })
                .catch(function (error){
                        console.log("发送请求失败：" + error)
                })
                .then(function (){
                    console.log("测试成功")
                })
        },
        getSubjectData(classgradeId) {
            let formData = new FormData();
            formData.append('classgradeId',classgradeId)
            this.$axios
                .post('student/subject/unsubmitted',formData)
                .then(response=> {
                    this.options.subjects = response.data
                })
                .catch(function (error){
                        console.log("发送请求失败：" + error)
                })
                .then(function (){
                    console.log("测试成功")
                })
        },
        personalInfo() {
            this.$axios
                .get("user/info")
                .then(response=> {
                    this.user = response.data
                })
                .catch(function (error){
                        console.log("发送请求失败：" + error)
                })
                .then(function (){
                    console.log("测试成功")
                })
        }
    },
    mounted() {
        this.getClassgradeData()
        this.personalInfo()
    }
}
</script>

<style scoped>
.container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.hwForm {
    width: 80%;
    height: 80%;
}


</style>
